/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description:  水平水箱,内水流颜色自定义，长度自定义，高度自定义。
 *  利用整体状态去控制管道是空还是有水流
 * CopyRight:
 * */
import React, { Component } from 'react';

import './index.css';

export default class HorizontalTank extends Component {
  constructor(props) {
    super(props);
    console.log('HorizontalTank props,', this.props);
    /*
         * * props 参数说明
         * x：相对位置x坐标
         * y: 相对位置y坐标
         * width： 宽度
         * height：高度
         * color: 水流颜色
         * 管道的默认颜色 #949494
         * state状态表示，是否有水流, 默认颜色： #1830fb
         * waterHeight: tank中的水流高度
         * */
    this.state = {
      fill: this.props.fill ? this.props.fill : false,
    };
    this.state.fill= true;
  }

  render() {
    return (
      <svg className="HorizontalTank" label={this.props.label ? this.props.label : 'HorizontalTank'} x={ this.props.x ? this.props.x : "900"} y={ this.props.y ? this.props.y : "750"}>
        <g transform="scale(6,3)">
          <svg width="100" height="100" className="HorizontalTankBox">
            <svg className="HorizontalTankContent" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
              <rect x="10%" y="3%" width="80%" height="94%" fill="#949494">
              </rect>
              <path d="M10,3 A90,105 0 0 0 10,97  Z" fill="#949494">
              </path>
              <path d="M90,3 A90,105 0 0 1 90,97  Z" fill="#949494">
              </path>
              <rect x="10%" y="0%" rx="1%" ry="1%" width="3%" height="100%" fill="#949494">
              </rect>
              <rect x="87%" y="0%" rx="1%" ry="1%" width="3%" height="100%" fill="#949494">
              </rect>
            </svg>
          </svg>
          <svg width="100" height="100" className="HorizontalTankCutaway">
            <svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
              <path d="M75,15 L85,25 L75,35 L85,45 L75,55 L85,65 L75,75 L85,85     L25,85   L15,75 L25,65 L15,55 L25,45 L15,35 L25,25 L15,15 Z" fill="#949494">
              </path>
              <path d="M75,15 L85,25 L75,35 L85,45 L75,55 L85,65 L75,75 L85,85     L25,85   L15,75 L25,65 L15,55 L25,45 L15,35 L25,25 L15,15 Z" fill={ this.props.color ? this.props.color : '#666'} >
              </path>
              <clipPath>
                {/* waterHeight max: 70%*/}
                <rect x="15%" y="15%" width="70%" height={ this.props.waterHeight ? ""+ this.props.waterHeight * 0.7 +"%" : "70%"} fill="#666">
                </rect>
              </clipPath>
            </svg>
          </svg>
          <svg x="25" y="20" height="60" width="12" opacity="0.5">
            <svg width="100%" height="100%"  preserveAspectRatio="xMinYMin meet" viewBox="0 0 20 100">
              <rect y="45%" x="50%" height="10%" width="50%" fill="#949494">
              </rect>
              <g transform="scale(0.2,1) translate(40,0)">
                <rect y="0%" x="20%" height="100%" width="60%" rx="20" ry="20"  fill="#949494" transform="">
                  {
                    this.state.fill ?
                      <animateTransform attributeType='xml' attributeName='transform' type='rotate' from="0 10 50" to="360 10 50" dur='4s' repeatCount="indefinite">
                      </animateTransform>
                      : ''
                  }
                </rect>
              </g>
              <rect y="45%" x="0%" width="50%" height="10%" fill="#949494">
              </rect>
            </svg>
          </svg>
          <svg x="37" y="20" height="60" width="12" opacity="0.5">
            <svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 20 100">
              <rect y="45%" x="50%" height="10%" width="50%" fill="#949494">
              </rect>
              <g transform="scale(0.2,1) translate(40,0)">
                <rect y="0%" x="20%" height="100%" width="60%" rx="20" ry="20" fill="#949494" transform="">
                  {
                    this.state.fill ?
                      <animateTransform attributeType='xml' attributeName='transform' type='rotate' from="0 10 50" to="360 10 50" dur='4s' repeatCount="indefinite">
                      </animateTransform>
                      : ''
                  }
                </rect>
              </g>
              <rect y="45%" x="0%" width="50%" height="10%" fill="#949494">
              </rect>
            </svg>
          </svg>
          <svg x="49" y="20" height="60" width="12" opacity="0.5">
            <svg width="100%" height="100%" data-bind="ctrlId: 'horRotor'" preserveAspectRatio="xMinYMin meet" viewBox="0 0 20 100">
              <rect y="45%" x="50%" height="10%" width="50%" fill="#949494">
              </rect>
              <g transform="scale(0.2,1) translate(40,0)">
                <rect y="0%" x="20%" height="100%" width="60%" rx="20" ry="20" fill="#949494" transform="">
                  {
                    this.state.fill ?
                      <animateTransform attributeType='xml' attributeName='transform' type='rotate' from="0 10 50" to="360 10 50" dur='4s' repeatCount="indefinite">
                      </animateTransform>
                      : ''
                  }
                </rect>
              </g>
              <rect y="45%" x="0%" width="50%" height="10%" fill="#949494">
              </rect>
            </svg>
          </svg>
          <svg x="61" y="20" height="60" width="12"  opacity="0.5">
            <svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 20 100">
            <rect y="45%" x="50%" height="10%" width="50%" fill="#949494">
            </rect>
            <g transform="scale(0.2,1) translate(40,0)">
              <rect y="0%" x="20%" height="100%" width="60%" rx="20" ry="20" fill="#949494" transform="">
                {
                  this.state.fill ?
                    <animateTransform attributeType='xml' attributeName='transform' type='rotate' from="0 10 50" to="360 10 50" dur='4s' repeatCount="indefinite">
                    </animateTransform>
                    : ''
                }
              </rect>
            </g>
            <rect y="45%" x="0%" width="50%" height="10%" fill="#949494">
            </rect>
          </svg>
          </svg>
        </g>
      </svg>
    );
  }
}
